<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- <parent-a></parent-a> -->
        <app-container></app-container>
    </div>
    <script src='./vue.js'></script>
    <script>
        // 组件嵌套
        // 组件的嵌套关系和该组件是否是全局还是局部没关系
        // 组件的嵌套关系(父子)和该组件的使用位置有关系
        Vue.component('child-a', {
            template: `
            <div>
                我是child-a组件
            </div>    
            `
        });

        // parent-a是child-a的父组件
        // child-a是parent-a的子组件
        Vue.component('parent-a', {
            template: `
                <div>
                    我是parent-a组件
                    <child-a></child-a>
                </div>
                `
        });

        new Vue({
            el: '#app',
            components: {
                'app-container': {
                    template: `
                    <div>
                        <h1>我是局部组件app-container</h1>
                        <parent-a></parent-a>
                    </div>    
                    `
                }
            },
            data: {

            },
            methods: {

            }
        });
    </script>
</body>

</html>